<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>（工资管理）学生工资查询</title>
  <link rel="stylesheet" href="../../dist/css/layui.css">
  <script src="../../dist/layui.js"></script>
  <script src="../../dist/jquery-1_8_3.js"></script>
  <style>
    fieldset {
      background: rgba(255,255,255,.3);

      border-color: rgba(255,255,255,.6);

      border-style: solid;

      -moz-border-radius: 5px;

      -webkit-border-radius: 5px;

      border-radius: 5px;

      line-height: 30px;

      list-style: none;

      padding: 5px 10px;

      margin-bottom: 2px;

      border-width: 1px;

      border-color: #008000;

      width:97%;
    }
    legend {
      color:#302A2A;

      font: bold 16px/2 Verdana, Geneva, sans-serif;

      text-align: left;
    }
  </style>
</head>
<body>

<!--搜索框-->
<fieldset class="table-search-fieldset">
  <legend>搜索</legend>
  <div style="margin: 10px 10px 10px 10px" id="btn">
    <form class="layui-form layui-form-pane" action="">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">学号</label>
          <div class="layui-input-inline">
            <input class="layui-input" name="keyword" id="uid" autocomplete="off" placeholder="请输入学号">
          </div>
          <label class="layui-form-label">姓名</label>
          <div class="layui-input-inline">
            <input class="layui-input" name="keyword" id="studentName" autocomplete="off" placeholder="请输入姓名">
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">时间范围</label>
            <div class="layui-input-inline">
              <input type="text" name="s_date" id="dateChoice" autocomplete="off" value="" placeholder="请选择时间范围" class="layui-input" readonly >
            </div>
          </div>
        </div>

        <div class="layui-inline">
          <button type="button" class="layui-btn" id="submitButton"  data-type="reload" lay-filter="data-search-btn"><i class="layui-icon"></i> 搜索</button>
        </div>
      </div>
    </form>
  </div>
</fieldset>

<table id="demo" lay-filter="test"></table>

<script>
  layui.use('laydate', function () {
    var laydate = layui.laydate;
    //获取当前时间设置选择时间的范围
    var myDate = new Date();
    //拼接当前时间
    var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + (myDate.getDate());

    //初始化选择时间控件
    laydate.render({
      elem: '#dateChoice'
      , type: 'date'
      , range: '~'
      //设置选择最大时间为当前
      , max: maxtime
      , calendar: true
      , btns: ['clear', 'confirm', 'now']
      , done: function (value, date) {
        //这里时选中后触发事件
        //value是选中的值
        var time = value;
      }
    });
  });

  layui.use('table', function(){
    var table = layui.table;

    //第一个实例
    table.render({
      elem: '#demo'
      ,height: "full-20"
      ,url: '/admin/selectStudentSalary' //数据接口
      ,page: {
        limit : 10,
        limits: [5, 10]
      } //开启分页
      ,id: 'tableSource'
      ,cols: [[ //表头
        {field: 'uid', title: '学号',align: "center", width:'10%'}
        ,{field: 'name', title: '姓名',align: "center", width:'10%'}
        ,{field: 'year', title: '学年',align: "center", width:'10%'}
        ,{field: 'term', title: '学期',align: "center", width:'10%'}
        ,{field: 'dept', title: '部门',align: "center", width:'13%'}
        ,{field: 'job', title: '岗位',align: "center", width:'12%'}
        ,{field: 'workMonth', title: '工作月',align: "center", width:'12%'}
        ,{field: 'salary', title: '工资',align: "center", width:'13%'}
        ,{field: 'settled', title: '是否发放',align: "center", width:'10%', templet: '#settledTpl'}
      ]]
    });

    var active = {
      reload: function(){
        // 学生学号
        var uid = $('#uid').val();
        // 学生姓名
        var studentName = $('#studentName').val();
        // 查询日期
        var dateChoice = $('#dateChoice').val();
        var dateArr = '';
        var beginDate;
        var endDate;
        if (dateChoice !== '') {
          // 分割日期
          dateArr = dateChoice.split("~", 2);
          beginDate = dateArr[0];
          endDate = dateArr[1];
        }
        else {
          beginDate = '2000-01-01';
          endDate = '2099-12-31';
        }
        //执行重载
        table.reload('tableSource', {
          page: {
            curr: 1 //重新从第 1 页开始
          }
          ,url: '/admin/selectStudentSalaryByName'
          // 异步数据接口的额外参数
          ,where: {
            uid: uid.trim(),
            studentName: studentName.trim(),
            beginDate: beginDate.trim(),
            endDate: endDate.trim()
          }
        });
      }
    };
    // 搜索框提交
    $('#submitButton').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
</script>
<script type="text/html" id="settledTpl">
  {{#  if(d.settled == '未发放'){ }}
  <span style="color: #eb7350;">{{ d.settled }}</span>
  {{#  } else { }}
  <span style="color: mediumseagreen;">{{ d.settled }}</span>
  {{#  } }}
</script>
</body>
</html>